<!--
 * @Author: Lqq
 * @Date: 2025-07-10 09:41:05
 * @LastEditors: Lqq 46081704@qq.com
 * @LastEditTime: 2025-07-14 17:47:29
 * @FilePath: \questionnaire\src\components\JudgeQuestion.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="judge-group">
    <el-radio-group v-model="selectedValue" @change="handleChange">
      <el-radio v-for="opt in options" :key="opt.value" :value="opt.value">
        {{ opt.label }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"

// 定义props
const props = defineProps<{
  modelValue: string // 当前选中值
  options: Array<{ value: string; label: string }> // 可选项列表
}>()

// 定义事件
const emit = defineEmits<{
  (e: "update:modelValue", val: string): void // 当选中值变化时触发
  (e: "change", val: string): void // 当选项改变时触发
}>()

// 使用ref创建响应式数据，初始值为props中的modelValue
const selectedValue = ref(props.modelValue)

// 监听props中的modelValue变化，并更新selectedValue
watch(
  () => props.modelValue,
  (val) => {
    selectedValue.value = val
  }
)

const handleChange = (val: string) => {
  emit("update:modelValue", val)
  emit("change", val)
}
</script>

<style scoped>
.judge-group {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}
</style>
